import * as PIXI from 'pixi.js'
import { createNsSprite, btnsModule } from '@/utils/bundle'
import param, { rightHeightUsage } from '../../param'
import { setPixi } from '@/store/modules/usePixiStore'
import useDiyStore from '@/store/modules/useDiyStore'
import { clickDiyAbilityFontSizeLeft, clickDiyAbilityFontSizeRight } from '@/utils/events'

export default async () => {
  const diyStore = useDiyStore()
  const container = new PIXI.Container()
  // 标签
  const labelText = new PIXI.Text({
    text: '字号',
    style: {
      fontFamily: 'XQFont',
      fontSize: param.value.fontSize,
      fill: param.value.fill,
      align: 'center',
    },
  })
  labelText.anchor.set(0, 0.5)
  // 输入框
  const inputContainer = new PIXI.Container()
  const inputSprite = await createNsSprite('input', 300, 90)
  inputSprite.scale.set(0.6)
  inputSprite.pivot.set(0, inputSprite.height / 2)
  inputSprite.position.set(150 * 0.6, 0)
  // 左按钮
  const leftSprite = await btnsModule('arrow')
  leftSprite.anchor.set(0.5)
  leftSprite.scale.set(0.45)
  leftSprite.position.set(150 * 0.6, 0)
  // 右按钮
  const rightSprite = await btnsModule('arrow')
  rightSprite.anchor.set(0.5)
  rightSprite.scale.set(0.45)
  rightSprite.position.set(450 * 0.6, 0)
  rightSprite.rotation = Math.PI
  // 文本
  const text = new PIXI.Text({
    text: diyStore.creationData.param.abilityFontSize,
    style: {
      fontFamily: 'XQFont',
      fontSize: param.value.fontSize * 0.7,
      fill: param.value.fill,
      align: 'center',
    },
  })
  text.anchor.set(0.5)
  text.position.set((inputSprite.width / 2) * 0.6 + 150 * 0.6, 0) // 注意比例
  inputContainer.addChild(inputSprite, text, leftSprite, rightSprite)
  clickDiyAbilityFontSizeLeft.whiteAdd(leftSprite)
  clickDiyAbilityFontSizeRight.whiteAdd(rightSprite)
  inputContainer.position.set(labelText.width, 0)
  setPixi(text.uid, text)
  diyStore.abilityFontSizeUid = text.uid
  container.addChild(inputContainer, labelText)
  container.position.set(param.value.leftUsageWidth + 40, param.value.startHeight + container.height / 2 + param.value.rightUsageHeight)
  rightHeightUsage(container)
  return container
}
